<template>
  <div class="option-wrapper">
    <div class="option-main">
      <a-form layout="vertical" :model="formState" :rules="rules">
        <div class="option-column">
          <div class="column-title">报修信息</div>
          <a-descriptions
            bordered
            :labelStyle="{ width: '120px' }"
            :contentStyle="{ width: '500px' }"
            :column="{ xxl: 1, xl: 1, lg: 1, md: 1, sm: 1, xs: 1 }"
          >
            <a-descriptions-item label="出故障日期">李四</a-descriptions-item>
            <a-descriptions-item label="附件">
              <a-image
                :style="{ display: 'none' }"
                :preview="{
                  visible,
                  onVisibleChange: setVisible,
                }"
                :width="0"
                src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
              />
              <a-button type="link" size="small" @click="() => setVisible(true)"
                >照片.jpg</a-button
              >
            </a-descriptions-item>
            <a-descriptions-item label="故障描述" span="2"
              >政教处主任</a-descriptions-item
            >
          </a-descriptions>
        </div>
        <div class="option-column">
          <div class="column-title">处理报修</div>
          <div class="column-content">
            <div class="content-item">
              <a-form-item label="分配维修人" name="name">
                <a-input
                  v-model:value="formState.name"
                  placeholder="请输入维修人姓名"
                />
              </a-form-item>
            </div>
            <div class="content-item">
              <a-form-item label="记录内容" name="content">
                <a-textarea
                  v-model:value="formState.content"
                  placeholder="请输入维修人姓名"
                />
              </a-form-item>
            </div>
          </div>
        </div>
        <div class="option-column">
          <div class="column-title">处理流程</div>
          <a-table
            class="table-inner"
            :row-selection="rowSelection"
            :columns="columns"
            :scroll="{ x: 700 }"
            :dataSource="tableData"
            :pagination="false"
            @change="onChange"
          >
          </a-table>
        </div>
        <div class="option-footer">
          <a-button class="opt-btn" @click="resetForm">取消</a-button>
          <a-button class="opt-btn" type="primary" htmlType="submit"
            >保存</a-button
          >
        </div>
      </a-form>
    </div>
  </div>
</template>
<script setup>
import { ref, computed } from "vue";
import { PlusOutlined } from "@ant-design/icons-vue";
const formState = ref({
  name: "",
  content: "",
});
const resetForm = () => {
}
const columns = ref([
  {
    dataIndex: "name",
    title: "维修人",
    width: 100,
  },
  {
    dataIndex: "content",
    title: "处理内容",
    ellipsis: true,
  },
  {
    dataIndex: "time",
    title: "时间",
    width: 200,
  },
]);
const tableData = ref([
  {
    name: "张三",
    content: "维修内容",
    time: "2023-05-12 12:00",
  },
  
]);
const rules = ref({
  name: [
    {
      required: true,
      message: "请输入客户名称",
      trigger: "blur",
    },
  ],
  no: [
    {
      required: true,
    },
  ],
  class: [
    {
      required: true,
      message: "请选择客户分类",
      trigger: "change",
    },
  ],
});
</script>

